<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东问答</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span>我要提问</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>生活用品</option><option>电子产品</option><option>儿童玩具</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布">
    </div>
</div>
<script src="./js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        // 事件绑定
        $("span").click(function(){
            $(".post").fadeIn();
            $(".title").val("");
            $("select").val("");
            $(".content").val("");
        });

        // 头像数组定义
        var touxiang = new Array();
        touxiang[0] = "tou01.jpg";
        touxiang[1] = "tou02.jpg";
        touxiang[2] = "tou03.jpg";
        touxiang[3] = "tou04.jpg";

        $(".btn").click(function(){
            // 头像
            // 获取一个随机头像下标
            var num = Math.floor(Math.random()*4);
            // 获取帖子的标题和分类
            var title = $(".title").val();
            var category = $("select").val();
            // 系统时间
            var date = new Date().toLocaleString(); //格式化日期
            
            // $()  工厂函数
            // es6 新特性 模板字符串 // ```````````
            // 任意换行缩进代码不报错   可以使用变量
            var str = `<li>
                            <div>
                                <img src="./images/${touxiang[num]}" alt="">
                            </div>
                            <h1>${title}</h1>
                            <p>
                                板块:${category}
                                <span>发表时间:${date}</span>
                            </p>
                        </li>`;

            // 追加节点
            $("ul").append($(str));
            $(".post").fadeOut();
        });

    })
</script>
</body>
</html>